<template>
  <el-form ref="formRef" :label-width="130" :model="basicData.form" class="user" :show-message="false" label-position="left">
    <div class="_left">
      <el-form-item prop="customerName" label="企业名称：" required>
        <el-input class="site-input" v-model="basicData.form.customerName" :disabled="isSwitch"></el-input>
      </el-form-item>

      <el-form-item label="组织机构代码：">
        <el-input class="site-input" placeholder="请填写三证合一的统一社会信用代码" v-model="basicData.form.organizingInstitutionCode" :disabled="isSwitch"></el-input>
      </el-form-item>

      <el-form-item label="营业执照：" prop="businessLicense.qualificationImg" required>
        <div v-if="!isSwitch" class="business-content">
          <el-upload ref="upload" :show-file-list="false" accept=".png,.jpg,jpeg" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onLicenseUploadSuccess(file, 'businessLicense')" :before-upload="beforeUpload">
            <img :src="basicData.form.businessLicense.qualificationImg" />
          </el-upload>
        </div>

        <el-image v-else style="width: 72px; height: 72px" class="img" :src="basicData.form.businessLicense.qualificationImg" :preview-src-list="[basicData.form.businessLicense.qualificationImg]"> </el-image>
      </el-form-item>
      <el-form-item class="personCardDate" label="证件有效期：" prop="businessLicense.effectiveDate" required>
        <el-date-picker v-model="basicData.form.businessLicense.effectiveDate" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable :disabled="isSwitch" /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.businessLicense.expiredDate" type="date" placeholder="请选择到期时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable :disabled="isSwitch" />
      </el-form-item>
      <el-form-item label="医疗机构执业许可证：">
        <div v-if="!isSwitch" class="business-content">
          <el-upload ref="upload" :show-file-list="false" accept=".png,.jpg,jpeg" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onLicenseUploadSuccess(file, 'institutionLicense')" :before-upload="beforeUpload" :disabled="isSwitch">
            <img v-if="basicData.form.institutionLicense.qualificationImg" :src="basicData.form.institutionLicense.qualificationImg" />
            <div class="noImg" v-else>
              <el-icon class="icon"><Plus /></el-icon>
              <div class="tip" scope.slot="tip">点击上传</div>
            </div>
          </el-upload>
        </div>

        <div v-else>
          <el-upload v-if="!basicData.form.institutionLicense?.qualificationImg" ref="upload" :show-file-list="false" accept=".png,.jpg,jpeg" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onLicenseUploadSuccess(file, 'institutionLicense')" :before-upload="beforeUpload" :disabled="isSwitch">
            <img v-if="basicData.form.institutionLicense.qualificationImg" :src="basicData.form.institutionLicense?.qualificationImg" />
            <div class="noImg" v-else>
              <el-icon class="icon"><Plus /></el-icon>
              <div class="tip" scope.slot="tip">点击上传</div>
            </div>
          </el-upload>

          <el-image v-else style="width: 72px; height: 72px" class="img" :src="basicData.form.institutionLicense?.qualificationImg" :preview-src-list="[basicData.form.institutionLicense.qualificationImg]"> </el-image>
        </div>
      </el-form-item>

      <el-form-item class="personCardDate" label="证件有效期：">
        <el-date-picker v-model="basicData.form.institutionLicense.effectiveDate" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable :disabled="isSwitch" /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.institutionLicense.expiredDate" type="date" placeholder="请选择到期时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable :disabled="isSwitch" />
      </el-form-item>

      <el-form-item label="联系人：" prop="contactMan" required>
        <el-input class="site-input" v-model="basicData.form.contactMan" :disabled="isSwitch"></el-input>
      </el-form-item>

      <el-form-item label="联系电话：" prop="contactPhone" required>
        <el-input class="site-input" v-model="basicData.form.contactPhone" :disabled="isSwitch"></el-input>
      </el-form-item>

      <el-form-item prop="registeredAddress" label="注册地址：" required>
        <el-input class="site-input" v-model="basicData.form.registeredAddress" :disabled="isSwitch"></el-input>
      </el-form-item>
    </div>

    <div class="_right">
      <el-form-item label="法人姓名：">
        <el-input class="site-input" v-model="basicData.form.legalPersonName" :disabled="isSwitch"></el-input>
      </el-form-item>

      <el-form-item label="身份证号：">
        <el-input class="site-input" v-model="basicData.form.legalPersonIdNumber" :disabled="isSwitch"></el-input>
      </el-form-item>

      <div class="legalPersonCard">
        <el-form-item label="身份证正反面：">
          <el-upload ref="upload" accept=".jpg,.png,.jpeg" :show-file-list="false" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'legalPersonCardPictureObverse')" :before-upload="beforeUpload" :disabled="isSwitch">
            <img v-if="basicData.form.legalPersonCardPictureObverse" :src="basicData.form.legalPersonCardPictureObverse" />
            <div class="noImg" v-else>
              <el-icon class="icon"><Plus /></el-icon>
              <div class="tip" scope.slot="tip">点击上传</div>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item prop="legalPersonCardPictureReverse">
          <el-upload ref="upload" accept=".jpg,.png,.jpeg" :show-file-list="false" :action="actionUrl" :headers="headers" list-type="picture-card" :on-success="(file) => onUploadSuccess(file, 'legalPersonCardPictureReverse')" :before-upload="beforeUpload" :disabled="isSwitch">
            <img v-if="basicData.form.legalPersonCardPictureReverse" :src="basicData.form.legalPersonCardPictureReverse" />
            <div class="noImg" v-else>
              <el-icon class="icon"><Plus /></el-icon>
              <div class="tip" scope.slot="tip">点击上传</div>
            </div>
          </el-upload>
        </el-form-item>
      </div>

      <el-form-item class="personCardDate" label="证件有效期：">
        <el-date-picker v-model="basicData.form.legalPersonCardStartDate" :disabled="isSwitch" type="date" placeholder="请选择开始时间" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker v-model="basicData.form.legalPersonCardEndDate" type="date" placeholder="请选择到期时间" :disabled="isSwitch" format="YYYY/MM/DD" value-format="YYYY/MM/DD" clearable />
      </el-form-item>

      <el-form-item prop="depositBank" label="开户银行：" required>
        <el-input class="site-input" v-model="basicData.form.depositBank" :disabled="isSwitch"></el-input>
      </el-form-item>

      <el-form-item prop="bankAccount" label="银行账户：" required>
        <el-input v-model="basicData.form.bankAccount" class="site-input" :disabled="isSwitch"></el-input>
      </el-form-item>

      <el-form-item label="纳税识别号：" prop="taxpayerId" required>
        <el-input class="site-input" v-model="basicData.form.taxpayerId" :disabled="isSwitch"></el-input>
      </el-form-item>

      <el-form-item prop="account" v-if="isSwitch === true" label="登录账号：" required>
        <div class="captcha">
          <el-input v-model="basicData.form.account" autocomplete="off" :disabled="isSwitch"></el-input>
          <Button class="captcha-btn" label="更换手机号" @click="onChangeNumberClick" />
          <Button class="captcha-btn" label="修改密码" @click="onChangePasswordClick" />
        </div>
      </el-form-item>
    </div>
  </el-form>

  <Number v-model:visible="numberVisible" @complete="onComplete" />

  <Password v-model:visible="passwordVisible" />
</template>

<script setup>
import { reactive, toRefs, shallowRef, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { apiBasePath } from '@/api/config'
import api from '@/api'
import consts from '@/consts'
import { ElMessage } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import Button from '@/components/button/button.vue'
import Number from './number.vue'
import Password from './password.vue'

const route = useRoute()
const props = defineProps(['infoForm', 'isSwitch'])
const emit = defineEmits(['complete'])

const { infoForm } = toRefs(props)
const numberVisible = ref(false)
const passwordVisible = ref(false)

const formRef = shallowRef()

const basicData = reactive({
  form: infoForm
})

const actionUrl = apiBasePath + '/medinstrument/site/uploadSingleFile'

const headers = {
  Authorization: 'Bearer ' + localStorage.getItem('_site_token')
}

const beforeUpload = (file) => {
  const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg'
  const isLt1M = file.size / 1024 / 1024 < 10

  if (!isJPG) {
    ElMessage.error('只能上传jpg/png/jpeg文件!')
  }
  if (!isLt1M) {
    ElMessage.error('上传图片大小不能超过 10MB!')
  }
  return isJPG && isLt1M
}

const onLicenseUploadSuccess = (file, fld) => {
  if (fld === 'businessLicense') {
    basicData.form.businessLicense.qualificationImg = file.data
  }

  if (fld === 'institutionLicense') {
    basicData.form.institutionLicense.qualificationImg = file.data
  }
}

const onUploadSuccess = (file, fld) => {
  basicData.form[fld] = file.data
}

const submit = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate((valid) => {
      if (valid) {
        resolve()
      } else {
        reject()
      }
    })
  })
}

defineExpose({ submit })

const onChangeNumberClick = () => {
  numberVisible.value = true
}

const onChangePasswordClick = () => {
  passwordVisible.value = true
}

const onComplete = () => {
  emit('complete')
}
</script>

<style lang="scss" scoped>
.user {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  ._left,
  ._right {
    width: 520px;
  }

  .captcha {
    width: 100%;
    display: flex;
    align-items: center;
    .el-input {
      height: 40px;
    }

    .captcha-btn {
      width: 140px;
      height: 40px;
      color: var(--color-primary);
      border-color: var(--color-primary);
      font-size: 14px;
      background-color: #fff;
      cursor: pointer;
      margin-left: 12px;
    }
  }

  .business-content {
    display: flex;

    .desc {
      // width: 307px;
      // height: 32px;
      font-size: 12px;
      color: var(--span-color-text);
      line-height: 16px;
      margin-left: 12px;
      margin-top: 44px;
    }
  }

  .legalPersonCard {
    display: flex;

    :deep(.el-form-item__content) {
      margin-left: 0 !important;
      margin-right: 20px;
    }
  }

  .personCardDate {
    :deep(.el-form-item__content) {
      flex-wrap: nowrap;
    }

    .time-icon {
      font-size: 8px;
      margin: 0 11px;
      color: var(--span-color-text);
    }
  }
}
</style>
